<template>
  <div class="mod-config">
    <el-row>
      <div class="title">{{dataForm.title}}</div>
    </el-row>
    <el-row>
      <mavon-editor class="mavon-editor" :ishljs="true" previewBackground="#fff" defaultOpen="preview" :subfield="false"
                    :toolbarsFlag="false" v-model="dataForm.content" ref="md"
                    :boxShadow="false" :editable="false"
      />
    </el-row>
    <el-row :gutter="11" style="margin-top: 5px;">
      <el-col :span="2.5">
        <div class="editor-foot">
          <icon-svg name="admin-red"></icon-svg>
          <span>发送者: {{dataForm.addUser}}</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="editor-foot">
          <icon-svg name="time-red"></icon-svg>
          <span>发送时间: {{dataForm.addTime}}</span>
        </div>
      </el-col>
      <el-col :span="2.5">
        <div class="editor-foot">
          <icon-svg name="leixing-red"></icon-svg>
          <span>类型: {{dataForm.sendRange == 0?'公告':'个人'}}</span>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 50px">
      <el-table
        :data="dataList"
        border
        :header-cell-style="getRowClass"
        v-loading="dataListLoading"
        style="width: 100%">
        <el-table-column
          prop="username"
          label="接收者"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="readStatus"
          header-align="center"
          align="center"
          label="阅读状态"
        >
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.readStatus == 1">已读</el-tag>
            <el-tag type="danger" v-if="scope.row.readStatus == 0">未读</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="readTime"
          header-align="center"
          align="center"
          label="阅读时间">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-row>
    <el-row>
      <div style="text-align: center">
        <el-button type="danger" @click="closeHandle">关闭</el-button>
      </div>
    </el-row>
  </div>
</template>

<script>
  import {mavonEditor} from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  import log from "../sys/log";

  export default {
    components: {
      mavonEditor
    },
    name: "imsglogview",
    data() {
      return {
        id: 0,
        dataForm: {
          id: 0,
          title: '',
          sendRange: 0,
          noticeType: '',
          content: '',
          receivers: '',
          status: '',
          addUser: '',
          addTime: '',
          editUser: '',
          editTime: ''
        },
        dataListLoading: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      }
    },
    computed: {
      documentClientHeight: {
        get() {
          return this.$store.state.common.documentClientHeight
        }
      },
      menuActiveName: {
        get() {
          return this.$store.state.common.menuActiveName
        },
        set(val) {
          this.$store.commit('common/updateMenuActiveName', val)
        }
      },
      mainTabs: {
        get() {
          return this.$store.state.common.mainTabs
        },
        set(val) {
          this.$store.commit('common/updateMainTabs', val)
        }
      },
      mainTabsActiveName: {
        get() {
          return this.$store.state.common.mainTabsActiveName
        },
        set(val) {
          this.$store.commit('common/updateMainTabsActiveName', val)
        }
      },
      siteContentViewHeight() {
        var height = this.documentClientHeight - 50 - 2
        if (this.$route.meta.isTab) {
          height -= 40
          return isURL(this.$route.meta.iframeUrl) ? {height: height + 'px'} : {minHeight: height + 'px'}
        }
        return {minHeight: height + 'px'}
      }
    },
    mounted: function () {
      if (this.$route.params.id == undefined) {
        this.$router.push("notice-imsglog")
        return
      }
      this.id = this.$route.params.id
      this.init(this.id)
    },
    methods: {
      init(id) {
        console.log(id)
        this.dataForm.id = id
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/notice/imsglog/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.title = data.imsgLog.title
              this.dataForm.sendRange = data.imsgLog.sendRange
              this.dataForm.noticeType = data.imsgLog.noticeType
              this.dataForm.content = data.imsgLog.content
              this.dataForm.status = data.imsgLog.status
              this.dataForm.addUser = data.imsgLog.addUser
              this.dataForm.addTime = data.imsgLog.addTime
              this.dataForm.editUser = data.imsgLog.editUser
              this.dataForm.editTime = data.imsgLog.editTime
              this.getDataList()
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      },
      getDataList() {
        this.dataListLoading = true
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/notice/imsglog/infoImsg/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.totalPage = data.imsgLog.receivers.length
              this.dataList = data.imsgLog.receivers.splice(this.pageIndex-1, this.pageIndex * this.pageSize)
            } else {
              this.$message.error(data.msg)
            }
            this.dataListLoading = false
          }).catch(() =>{
            this.dataListLoading = false
          })
        }
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:#f5f7fa;color:#303133;text-align:center;font-size:16px;font-weight:600;height:60px;'
        } else {
          return ''
        }
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      closeHandle() {
        this.removeTabHandle("notice-imsglogview")
        this.$router.push("notice-imsglog")

      },
      // tabs, 删除tab
      removeTabHandle(tabName) {
        this.mainTabs = this.mainTabs.filter(item => item.name !== tabName)
        if (this.mainTabs.length >= 1) {
          // 当前选中tab被删除
          if (tabName === this.mainTabsActiveName) {
            var tab = this.mainTabs[this.mainTabs.length - 1]
            this.$router.push({name: tab.name, query: tab.query, params: tab.params}, () => {
              this.mainTabsActiveName = this.$route.name
            })
          }
        } else {
          this.menuActiveName = ''
          this.$router.push({name: 'home'})
        }
      },
    }
  }
</script>

<style scoped>
  .mod-config {
    padding: 0 6px;
  }

  .title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;;
  }

  .mavon-editor {
    height: 400px;
    overflow-y: auto;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid red;
    border-radius: 0px;
    z-index: 0;
  }

  .editor-foot {
    display: flex;
    justify-content: center;
  }
</style>
